<template>
    <view class='container'>
        <v-tabs :padding="12"  v-model="current" :tabs="tabs" @change="changeTab" color="#666666" activeColor="#0F1954"
            fontSize="28rpx" activeFontSize="28rpx" lineColor="#0F1954" fixed lineHeight="6rpx" bgColor="#F8F9FD">
        </v-tabs>
        <swiper class="swiper" :autoplay="false" :current="current" @change="changeSwiper">
            <swiper-item class="swiper-item">
                <view>
                    <card />
                    <card />
                    <card />
                    <card />
                    <card />
                    <card />
                    <card />
                    <card />
                </view>
            </swiper-item>
            <swiper-item class="swiper-item">
                <view >
                    <card />
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
import card from '@/components/card.vue';
export default {
    components: { card },
    data() {
        return {
            current: 0,
            tabs: ['买入', '卖出'],
        };
    },
    mounted() {

    },
    methods: {
        changeSwiper(e){
            this.current = e.detail.current;
        },
        changeTab(index) {
            this.current = index;
            // this.$nextTick(() => {
            //     this.$refs.swiper.swipeTo(index);
            // });
        }
    },
}
</script>

<style scoped>
.container {
    width: 100vw;
    height: 100vh;
    background: #F8F9FD;
    display: flex;
    flex-direction: column;
}

.swiper {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    display: flex;
}

.swiper-item {
    overflow-y: scroll !important;
}
</style>